<template>
	<view>
		<block v-if="list.length">
			<view class="card_list" v-for="item in list" :key="item.id" @click="select(item.card)">
				<view class="card_text">
					<view class="card_logo">
						<image src=""></image>
					</view>
					<view class="card_name">{{item.name}}</view>
					<!-- <text>储蓄卡</text> -->
				</view>
				<view class="card_num">
					<text>****</text>
					<text>****</text>
					<text>****</text>
					<text>****</text>
					<text>{{item.card.substring(16)}}</text>
				</view>
			</view>
		</block>
		<view v-else class="bitmap">
			<image src="/static/img/no_content.png" mode="widthFix"></image>
			<view>暂时没有银行卡哦~</view>
		</view>
		<view class="add_card" @click="addCard">
			<text class="iconfont iconjiahao"></text>
			<view>添加银行卡</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1
			}
		},
		methods: {
			addCard() {
				uni.navigateTo({
					url: 'addBankCard'
				})
			},
			getList() {
				this.$get(this.$api.bLists, {
					page: this.page,
					limit: 100
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = data.data.data;
					}
				})
			},
			select(card){
				uni.setStorageSync('bankCard',card);
				this.$back()
			}
		},
		onShow() {
			this.getList();
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.getList()
		// }
	}
</script>

<style scoped>
	.bitmap {
		text-align: center;
		padding-top: 100rpx;
	}

	.bitmap image {
		width: 60%;
	}

	.bitmap view {
		color: gray;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.card_list {
		width: 690rpx;
		height: 240rpx;
		background: linear-gradient(-48deg, #FF3237 0%, #FF7078 100%);
		border-radius: 10rpx;
		margin: 30rpx auto 0;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.card_text {
		display: flex;
		align-items: flex-end;
		padding: 30rpx 0 60rpx 0;
	}

	.card_logo {
		width: 51rpx;
		height: 51rpx;
		background: #FFFFFF;
		border-radius: 50%;
		overflow: hidden;
	}

	.card_logo image {
		width: 100%;
		height: 51rpx;
	}

	.card_name {
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 0 10rpx 0 30rpx;
	}

	.card_text text {
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.card_num {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 48rpx;
	}

	.card_num text {
		margin-right: 40rpx;
		font-size: 48rpx;
	}

	.add_card {
		width: 690rpx;
		height: 90rpx;
		border: 4rpx dashed #FF7133;
		border-radius: 10rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 30rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add_card view {
		font-size: 36rpx;
		color: #FF7133;
	}

	.add_card text {
		font-size: 36rpx;
		color: #FF7133;
	}
</style>
